gem wicked_pdf 的使用

发表于 |

参考 github 网址：https://github.com/mileszs/wicked_pdf
注：我的是 gem ‘rails’, ‘~> 4.2’，所以github官网上有些配置不需要配置
参考链接:
https://reinteractive.com/posts/270-wickedpdf-and-custom-fonts-in-rails
http://cnedelcu.blogspot.com/2015/04/wkhtmltopdf-chinese-character-support.html
https://blog.ragnarson.com/2014/01/13/generating-pdfs-with-custom-fonts-using-wkhtmltopdf.html

1.添加 gem 到 Gemfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
gem 'wkhtmltopdf-binary' #(wicked_pdf 依赖这个 gem)
gem 'wicked_pdf'
```  
2.终端执行 `rails generate wicked_pdf`,这会生成一个文件 `config/initializers/wicked_pdf.rb`
3.在 controller 中加入 format.pdf, 如果没有什么特殊的样式，pdf 和 html 引入的 js 和 css 都是一致的，因为要加入 wicked_pdf 的 tag，所以我区分了两个 layout
```rb
class ThingsController < ApplicationController
  def show
    respond_to do |format|
      format.html do
        load_exam_entry
        render 'show', layout: 'exams'
      end
      format.pdf do
        load_exam_entry
        render pdf: "file_name",layout: 'exams_pdf'   # Excluding ".pdf" extension.
      end
    end
  end
end

4.layout: 'exams_pdf' 的配置, 修改的地方就是把 <%= stylesheet_link_tag 'exams' %> <%= javascript_include_tag 'exams' %> 改成 <%= wicked_pdf_stylesheet_link_tag 'exams' %> <%= wicked_pdf_javascript_include_tag 'exams' %>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <title><%= (@exam.try :paper).try(:name) || '考试结束' %></title>
  <meta charset='utf-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <%= favicon_link_tag('favicon.ico') %>
  <%= wicked_pdf_stylesheet_link_tag 'exams' %>
  <%= wicked_pdf_javascript_include_tag 'exams' %>
  <%=  render 'shared/track/site_master' %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>

5.以上四步就可以预览 pdf ；

6.这里加上 dpi: 72 可以加快生成速度，disposition: 'attachment' 这个是作为附件下载，而不是网页预览。

1
render pdf: file_name,layout: 'exams_pdf', encoding: 'UTF-8', dpi: 72, disposition: 'attachment'

7.由于 wkhtmltopdf 是依赖系统的字体生成 pdf ，所以要在服务器上安装相应字体，不然到 uat 或者生产环境，没有字体的话，中文都会显示成小框框。